<template>
  <div class="mine-box rule-box">
    <div class="user-box-title" :style="back">
      <adminuserinfo></adminuserinfo>

      <div class="rule-b-box">
        <mu-button class="black-btn btn" @click="showDefaultRules">默认规则</mu-button>
      </div>
    </div>

    <div class="rules-list List">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
      <mu-list>
        <mu-list-item v-for="(item,index) in ruleList" :key="index">
          <mu-list-item-content>
            <mu-list-item-title>
              <div class="fleft">
                <p class="title-name">
                  <span class="status-name" style="color:#31D19E">{{item.isGive|isGive}}</span>
                  <span class="add-name">{{item.changeName}}</span>
                  <span class="status-name" style="color:#31D19E">{{item.ruleTypeName}}</span>
                </p>
                <p class="xadd">{{item.chargeTypeName}}</p>
              </div>

              <p class="fright">
                <span style="color:#1EC3F1">{{item.pileCount}}台</span>
                <!-- <span size="25" class="fright iconfont icon-narrow"></span> -->
              </p>
            </mu-list-item-title>
            <mu-list-item-sub-title>
              <p class="fright">
                <span @click="copyrule(item)">复制</span>
                <span @click="editrule(item.id)">编辑</span>
                <span v-if="item.pileCount==0&&item.isGive!=1" style="color:#FB6D3A" @click="deleterule(item.id,item.pileCount)" :style="item.pileCount | Count">删除</span>
              </p>
            </mu-list-item-sub-title>
          </mu-list-item-content>
        </mu-list-item>
        <div v-show="nolist" class="nolist">
          <span class="iconfont icon-charging"></span>
          <p>暂无规则</p>
        </div>
      </mu-list>
    </mu-load-more>
    </div>
    <newrule ref="newrule"></newrule>
  </div>
</template>

<script>
import newrule from "@/components/global/newrule";
import { Toast } from "vant";
import "vant/lib/toast/style/index";
export default {
  data() {
    return {
      back: {
        background:
          "url(" + require("../../../assets/image/minebackimg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      },
      ruleList: [],
      num: 10,
      nolist: true,
        refreshing: false,
        loading: false,
        loaded_all: false,
    };
  },
  components: {
    newrule: newrule
  },
  methods: {
      refresh() {
          this.refreshing = true;
          this.$refs.container.scrollTop = 0;
          setTimeout(() => {
              this.refreshing = false;
              this.getList({pageNo:1,pageSize:this.num});
          }, 2000);
      },
      load() {
          this.loading = true;
          setTimeout(() => {
              this.loading = false;
              this.num += 3;
              this.getList({pageNo:1,pageSize:this.num});
          }, 2000);
      },
      showDefaultRules(){
        this.ruleList=this.sortRules
      },
    getList(params) {
      this.$api.getRuleList(params).then(res => {
        if (res.data != "") {
          if (res.data.message.code == 0) {
            this.ruleList = res.data.data.records;

            this.nolist = false;
            if (res.data.data.pages == 1) {
              Toast("已加载全部数据");
              this.loaded_all = true;
            }
          }
        } else {
          this.ruleList = [];
          Toast("暂无规则");
        }
      });
    },
    deleterule(id,count) {
      if(count!=0){
        return;
      }
      this.$confirm('确定要删除？', '', {

      }).then(({ result }) => {
        if (result) {
          this.$api.deleteRule(id).then(res => {
        if (res.data.message.code == 0) {
          Toast("删除成功");
          this.getList({pageNo:1,pageSize:this.num});
        } else {
          Toast(res.data.message.message);
        }
      });
        } else {
             Toast("取消删除");
        }
      });


    },
    shownewrule() {
      this.$refs.newrule.newruleShow();
    },
    copyrule(obj) {
      console.log(obj);
      this.$prompt("请输入新规则名", "", {
        validator(value) {
          return {
            valid: /^/.test(value),
            message: "规则名不能为空"
          };
        }
      }).then(({ result, value }) => {
        if (result) {
          this.$api
            .copyRule({
              changeName: value,
              id: obj.id
            })
            .then(res => {
              if (res.data.message.code == 0) {
                Toast("复制规则成功");
                this.getList({pageNo:1,pageSize:this.num});
              } else {
                Toast(res.data.message.message);
              }
            });
        } else {
          Toast("取消复制规则");
        }
      });
    },
    editrule(id) {
      this.$router.push({
        path: "/admin/editrule/" + id
      });
    }
  },
  mounted() {
    this.getList({pageNo:1,pageSize:this.num});
  },
  computed:{
      sortRules(){
          return sortByKey(this.ruleList,'isGive')
      }
  },
  watch: {
    ruleList: function(v) {
      if (v == "") {
        this.nolist = true;
      } else {
        this.nolist = false;
      }
    }
  },
  filters:{
    Count:function(v){
      if(v!=0){
        return 'color:rgb(216, 216, 216)'
      }
    },
    isGive:function(v){
        if(v==1){
            return "默认"
        }else{
            return ""
        }
    }
  }
};
function sortByKey(array,key){
    return array.sort(function(a,b){
        var x = a[key];
        var y = b[key];
        return((x>y)?-1:((x<y)?1:0));
    })
}

</script>

<style>
</style>
